<template>
  <div style="display: inline-block">
    <el-button size="small" @click="handleFilelist()">文件列表</el-button>
    <el-dialog title="文件列表" v-model="filelistshow" width="1500px" append-to-body>
        <div class="manage">
            <div>    
                <el-tooltip class="item" effect="dark" content="上传文件" placement="top">
                  <el-upload
                    ref="uploadRef"
                    v-model:file-list="fileList"
                    class="upload-demo"
                    :headers="headers"
                    :action="url"
                    multiple
                    accept=".txt,.docx,.pdf"
                    :limit="3"
                    :on-exceed="onErrorFile"
                    :on-success="onSuccessFile"
                    :data="{kid: prop.kgid}"
                  >
                    <el-button type="primary">上传文件</el-button>
                  </el-upload>
                </el-tooltip>
            </div>    
            <!-- 主表格 -->
            <el-table :data="tableData" border>
                <el-table-column type="index" width="60" label="序号" />
                <el-table-column prop="name" label="文件名称">
                </el-table-column>
                <el-table-column prop="type" label="类型">
                </el-table-column>
                <el-table-column prop="valid" label="有效">
                    <template #default="scope">
                        <el-switch v-model="isvalid[scope.row.valid]" />
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                </el-table-column>
                <el-table-column prop="num_char" label="字符数">
                </el-table-column>
                <el-table-column prop="num_chunk" label="分段数">
                </el-table-column>
                <el-table-column prop="operation" label="操作" width="300">
                    <template #default="scope">
                        <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>            
            <div class="example-pagination-block">
              <el-pagination layout="prev, pager, next" :total="50" />
            </div>
        </div>
    </el-dialog> 
  </div>   
</template>

<script lang="ts" setup> 
  import { ref , reactive, onMounted ,defineProps} from "vue";
  import { request } from "/@/utils/service";
  import type { UploadUserFile } from 'element-plus'
  import { Session } from '/@/utils/storage';
  import { getBaseURL } from '/@/utils/baseUrl';
  import { ElMessage } from 'element-plus'
  import type { UploadInstance } from 'element-plus'

  const tableData = ref([]);
  const prop = defineProps({
    kgid:{
      type:Number,
      default:NaN
    }
  })

  const headers = ref({ Authorization: 'JWT ' + Session.get('token') });
  const url = getBaseURL() + 'api/knowledge/knowledgerecord_list/';
  const filelistshow = ref(false);
  const fileList = ref<UploadUserFile[]>([])

  const isvalid = ref({1: true, 0: false})

  const uploadRef = ref<UploadInstance>()
  const onErrorFile = () => {
    ElMessage.error('文件上传失败')
    uploadRef.value.clearFiles(); //去掉文件列表
  }

		// 文件上传成功钩子
  const onSuccessFile = () => {
    ElMessage.success('文件上传成功')
    uploadRef.value.clearFiles(); //去掉文件列表
  }

  const handleFilelist = () => {
    filelistshow.value=true;
    getKnowledgeRecord();
  };
  const getKnowledgeRecord = () => {
    console.log(prop.kgid);
    request({
        url: '/api/knowledge/knowledgerecord_list/',
        method: 'get',
        params: {
          parent: prop.kgid
        }
      })
      .then(res => {
        tableData.value = res.data;
      })
      .catch(err => {
        console.log(err);
      });
  };

  const handleDelete = (row: any) => {
    request({
        url: '/api/knowledge/knowledgerecord_list/'+row.id+'/',
        method: 'delete',
      })
      .then(res => {
        getKnowledgeRecord();
      })
      .catch(err => {
        console.log(err);
      });
  };
  onMounted(() => {
    
  });
</script>

<style lang="scss" scoped>
    .manage{
        padding: 20px;
        background: #ffffff;
        height: 100%;
        width: 100%;
        box-sizing:border-box;
        .search{
            margin-top: 20px;
            height: 60px;
            .s_right{
                float: right;
            }
        }
        .form{
            margin: 0 auto;
            width: 400px;
        }
        .page{
            float:right;
            margin-top:20px;
            height: 50px;
        }
    }

</style>
